<template>
  <el-container class="height100">
    <el-main class="height100">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-radio-group  v-model="tabPosition" class="panel-date" @change="handleTimeChange">
            <el-radio-button :label="$t('today')">{{$t('today')}}</el-radio-button>
            <el-radio-button :label="$t('week')">{{$t('week')}}</el-radio-button>
            <el-radio-button :label="$t('month')">{{$t('month')}}</el-radio-button>
            <el-radio-button :label="$t('year')">{{$t('year')}}</el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :span="16">
          <el-radio-group v-model="searchdata.applicationid">
            <!-- <el-radio label="">
              Default
            </el-radio> -->
            <el-radio v-for="item in customApps.datas" :label="item.id" :key="item.description?item.description:item.name" @change="handleAppidChange">
              {{item.description?item.description:item.name}}
            </el-radio>
          </el-radio-group>
          <el-checkbox v-model="checked" disabled class="paddingLeft10">{{$t('show_user')}}</el-checkbox>
        </el-col>
      </el-row>
      <el-row v-show="hasData" class="panel_frame">
        <el-row :gutter="24">
          <!-- v-show="tableData4.length>0" -->
          <!-- <el-col :span="12" style="height:600px;"><div style="height:600px;" id='flowAndNode' class="panel-erchart"></div></el-col>
          <el-col :span="12" style="height:600px;"><div style="height:600px;" id='flowTimeConsuming' class="panel-erchart"></div></el-col> -->
          <el-col :span="12"><div id='flowAndNode' class="panel-erchart"></div></el-col>
          <el-col :span="12"><div id='flowTimeConsuming' class="panel-erchart"></div></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"><div id='flowAccounting' class="panel-erchart"></div></el-col>
          <el-col :span="12">
            <p class="align-center">{{$t('time_consuming')}}</p>
            <el-table
            :data="tableData4"
            border
            class="process-node-wrap"
            >
              <el-table-column
                prop="FLOWNAME"
                :label="$t('flowName')"
              >
              </el-table-column>
              <el-table-column
                prop="STARTNODENAME"
                :label="$t('startnodename')"
              >
              </el-table-column>
              <el-table-column
                prop="ENDNODENAME"
                :label="$t('endnodename')"
              >
              </el-table-column>
              <el-table-column
                prop="auditor"
                :label="$t('auditor')"
              >
              </el-table-column>
              <el-table-column
                prop="AMOUNT"
                :label="$t('amount')"
              >
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-row>
      <el-row v-if="noData" class="align-center panel-nodata-icon">
        <i class="fa fa-inbox fa-5x"></i>
        <el-row>{{$t('nodata')}}</el-row>
      </el-row>
    </el-main>  
  </el-container>
</template>

<script>
import echarts from 'echarts';
export default {
  created() {
    this.$api.getCustomAppConfig(
      { domainid: this.$route.query.domainid, data:{name: ""} },
      {
        onSucess: resp => {
          this.customApps = resp.data.data;
          this.searchdata.applicationid=this.customApps.datas[0].id;
          this.searchTableData();
        }
      }
    );
  },
  data() {
    return {
      searchdata: {
        domainid: this.$route.query.domainid,
        applicationid: "",
        showmode:"all",
        daterange:"thisyear"
      },
      customApps: [],
      tabPosition:this.$t('year'),
      checked:true,
      legend:[],//图例的数据 
      series:[],//展示数据
      legend2:[],//图例的数据 
      series2:[],//展示数据
      legend3:[],//图例的数据 
      series3:[],//展示数据
      option:{
        color: ['#003366', '#006699', '#4cabce', '#e5323e'],
         title : {
            text: this.$t('process_node_time'),
            x:'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: [],
                axisLabel:{
                    rotate:45
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel:{
                  formatter:"{value} H"
                }            }
        ],
        series: [{
        
          type: 'bar',
          barGap: 10,
          data: []
        }]
      },
      option2:{
        title : {
            text: this.$t('proportion_of_process_time'),
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'horizontal',
            top: '30',
            data: []
        },
        series : [
          {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
          }
        ]
      },
      option3:{
        title : {
          text: this.$t('process_instance_ratio'),
          x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'horizontal',
            top: '30',
            data: []
        },
        series : [
          {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
          }
        ]
      },
      chart:null,
      chart2:null,
      chart3:null,

      tableData:{}, //流程&节点耗时表
      tableData2:{}, //流程耗时占比表
      tableData3:{}, //流程实例占比表
      tableData4:[], //流程节点耗时Top10

      hasData: true,
      noData: false,
    };
  },
  mounted(){
    this.initCharts();
  },
  methods: {
    handleTimeChange(time){
      switch(time){
        case this.$t('today'):
          this.searchdata.daterange="today";
          this.searchTableData();
          break;
        case this.$t('week'):
          this.searchdata.daterange="thisweek";
          this.searchTableData();
          break;
        case this.$t('month'):
          this.searchdata.daterange="thismonth";
          this.searchTableData();
          break;
        case this.$t('year'):
          this.searchdata.daterange="thisyear";
          this.searchTableData();
          break;
        default:
          this.searchdata.daterange="today";
          this.searchTableData();

          break;
      }
      
    },
    searchTableData(){
      // let this=this;
      this.tableData={};
      this.tableData2={},
      this.tableData3={},
      this.legend=[];
      this.series=[];
      this.legend2=[];
      this.series2=[];
      this.legend3=[];
      this.series3=[];
      this.$api.getFlowAndNodeTime(this.searchdata, {
        onSucess: resp => {
          if(resp.data.data){
            this.tableData = resp.data.data;
            this.hasData = true;
            this.noData = false;
          }else{
            this.hasData = false;
            this.noData = true;
          }
          let data=[];
          let seriesBar={
            type:"bar",
            barGap: 10,
            data:data,
          }
          if(this.tableData.length>0){
            this.tableData.forEach(elm => {
              
              elm.groupColumns.forEach(el => {
                if(el.columnName=="STARTNODENAME" && el.value){
                  this.legend.push(el.value)//将每个的流程开始节点名字存到legend中
                }
                // }else if(el.columnName=="FLOWNAME" && el.value && el.value!=""){
                //   seriesBar.name=el.value;
                // }else{
                //   return true;
                // }

              })
              data.push(elm.resultFields[0].value);
              // if(seriesBar.name!==""){
                
              // }else{
              //   return true;
              // }
            })
          }
          this.series.push(seriesBar)
          this.option.xAxis[0].data=this.legend;
          this.option.series=this.series;
          
          if(this.chart){
          this.chart.setOption(this.option)
            
          }
        }
      });
      this.$api.flowTimeConsumingAccounting(this.searchdata, {
        onSucess: resp => {
          if(resp.data.data){
            this.tableData2 = resp.data.data;
          }
          if(this.tableData2.length>0){
            this.tableData2.forEach((elm) => {
              let seriesBar={
                value:0,
                name:"",
              }
              elm.groupColumns.forEach((el) => {
                if(el.columnName=="FLOWNAME" && el.value){
                  this.legend2.push(el.value)//将每个的流程开始节点名字存到legend中
                  seriesBar.name=el.value;
                }
              })
              if(seriesBar.name!=""){
                seriesBar.value=elm.resultFields[0].value;
              }
              this.series2.push(seriesBar);
            })
          }
          this.option2.legend.data=this.legend2;
          this.option2.series[0].data=this.series2;
          
          if(this.chart2){
          this.chart2.setOption(this.option2)
            
          }
        }
      });
      this.$api.flowAccounting(this.searchdata, {
        onSucess: resp => {
          if(resp.data.data){
            this.tableData3 = resp.data.data;
          }
          if(this.tableData3.length>0){
            this.tableData3.forEach((elm) => {
              let seriesBar={
                value:0,
                name:"",
              }
              elm.groupColumns.forEach((el) => {
                if(el.columnName=="FLOWNAME" && el.value){
                  this.legend3.push(el.value)//将每个的流程开始节点名字存到legend中
                  seriesBar.name=el.value;
                }
              })
              if(seriesBar.name!=""){
                seriesBar.value=elm.resultFields[0].value;
              }
              this.series3.push(seriesBar);
            })
          }
          this.option3.legend.data=this.legend3;
          this.option3.series[0].data=this.series3;
          if(this.chart3){
          this.chart3.setOption(this.option3)
            
          }
        }
      });
      this.$api.doAnalyzerActorTimeConsumingTopX(this.searchdata, {
        onSucess: resp => {
          let respData4=[];
          if(resp.data.data){
            respData4 = resp.data.data;
          }
          this.tableData4 = [];
          respData4.forEach(elm=>{
             let seriesBar={
              "FLOWNAME":"",
              "STARTNODENAME":"",
              "ENDNODENAME":"",
              "auditor":"",
              "AMOUNT":0,
            }
            elm.groupColumns.forEach(el=>{
              switch(el.columnName){
                case"FLOWNAME":
                  seriesBar.FLOWNAME=el.value;
                  break;
                case"STARTNODENAME":
                  seriesBar.STARTNODENAME=el.value;
                  break;
                case"ENDNODENAME":
                  seriesBar.ENDNODENAME=el.value;
                  break;
                case"NAME":
                  seriesBar.auditor=el.value;
                  break;
                default:
                  break;
              }
            })
            seriesBar.AMOUNT=elm.resultFields[0].value;
            this.tableData4.push(seriesBar);
          })
        }
      });
    },
    initCharts() {
      this.chart = echarts.init(document.getElementById('flowAndNode'));
      this.chart.setOption(this.option)
      this.chart2 = echarts.init(document.getElementById('flowTimeConsuming'));
      this.chart2.setOption(this.option2)
      this.chart3 = echarts.init(document.getElementById('flowAccounting'));
      this.chart3.setOption(this.option3)
    },
    
    handleAppidChange(label){
      this.searchdata.applicationid=label;
      this.searchTableData();


    },
    resolvingDate(date){
      let d = new Date(date);

      let month = (d.getMonth() + 1) < 10 ? '0'+(d.getMonth() + 1) : (d.getMonth() + 1);
      let day = d.getDate()<10 ? '0'+d.getDate() : d.getDate();
      // let hours = d.getHours()<10 ? '0'+d.getHours() : d.getHours();
      // let min = d.getMinutes()<10 ? '0'+d.getMinutes() : d.getMinutes();
      // let sec = d.getSeconds()<10 ? '0'+d.getSeconds() : d.getSeconds();

      let times=d.getFullYear() + '-' + month + '-' + day ;
      // + ' ' + hours + ':' + min + ':' + sec

      return times
    },
  },
}
</script>